import React from 'react';
import { AimOutlined } from '@ant-design/icons';
import { Decoration5 } from '@jiaminghi/data-view-react';
import { Space, Cascader } from 'antd';
import RightContent from '@/components/RightContent';
import HeaderSearch from '@/components/HeaderSearch';
import { getArea } from '@/services/home/public';
import './TopHeader.less';

export default class TopHeader extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      areaTree: [],
      area: [{ label: '中国', value: '0000' }],
    };
  }

  componentDidMount() {
    this.getAreaTree();
  }

  getAreaTree = () => {
    getArea().then((res) => {
      const { label, value, children } = res;
      this.setState({
        areaTree: [{ label, value }, ...children],
      });
    });
  };

  changeArea = (val, selectedOptions) => {
    console.log(val, selectedOptions);
    this.setState({
      area: selectedOptions,
    });
  };

  render() {
    const { areaTree, area } = this.state;
    const areaText = area.map((item) => item.label).join('-');
    return (
      <div id="top-header">
        <div className="header-left-decoration">
          <Space size="middle">
            <Cascader options={areaTree} defaultValue={['0000']} onChange={this.changeArea}>
              <div>
                <AimOutlined />
                <span className="header-location">{areaText}</span>
              </div>
            </Cascader>
            <HeaderSearch />
          </Space>
        </div>
        <Decoration5 className="header-center-decoration" />
        <div className="header-right-decoration">
          <RightContent search={false} />
        </div>
        <div className="center-title">凯海智慧能源综合管理系统</div>
      </div>
    );
  }
}
